<script setup lang="ts">
import { useApi } from "@/views/domain/knowledge/api/ollama";
import { useAI } from "@/views/domain/knowledge/store/useAI";
import { onMounted, ref } from "vue";
import PullModel from "./LLMModelMan/PullModel.vue";
import { db } from "@/views/domain/knowledge/store/database";

const { listLocalModels, deleteModel } = useApi();
const pullModelRef = ref();
const modelList = ref([]);

const formatSize = (size: any) => {
  if (!size) {
    return "-";
  }
  const sizeNum = parseInt(size);
  if (sizeNum < 1024) {
    return sizeNum + "B";
  } else if (sizeNum < 1024 * 1024) {
    return (sizeNum / 1024).toFixed(2) + "KB";
  } else if (sizeNum < 1024 * 1024 * 1024) {
    return (sizeNum / (1024 * 1024)).toFixed(2) + "MB";
  } else {
    return (sizeNum / (1024 * 1024 * 1024)).toFixed(2) + "GB";
  }
};

const mixLocalPullingModels = async () => {
  db.models?.toArray().then(localList => {
    modelList.value.push(
      ...localList
        .filter(v => modelList.value.findIndex(row => row.name === v.name) < 0)
        .map(item => ({
          name: item.name,
          status: item.status
        }))
    );
  });
};

const refreshModelList = async () => {
  modelList.value = [];
  const { models } = await listLocalModels();
  modelList.value = models;

  mixLocalPullingModels();
};

const rmModel = (model: any) => {
  if (model.status) {
    db.models.delete(model.name);
  } else {
    deleteModel({ model: model.name });
  }

  setTimeout(() => {
    refreshModelList();
  }, 1000);
};

onMounted(() => {
  refreshModelList();
});
</script>

<template>
  <el-container>
    <PullModel ref="pullModelRef" @refresh="refreshModelList()" />
    <el-header class="model-head">
      <el-button type="primary" icon="Download" @click="pullModelRef.show()">
        拉取模型
      </el-button>
      <el-button text icon="Refresh" @click="refreshModelList" />
    </el-header>
    <el-main>
      <el-table
        :data="modelList"
        border
        style="width: 100%"
        table-layout="fixed"
      >
        <el-table-column prop="name" label="模型名称" />
        <el-table-column prop="status" label="模型状态">
          <template v-slot="{ row }">
            <el-tag v-if="row.status === 'pulling'" type="info">
              拉取中
            </el-tag>
            <el-tag v-else-if="row.status === 'fail'" type="danger">
              拉取失败
            </el-tag>
            <el-tag v-else type="success"> 已拉取 </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="modified_at" label="修改时间" />
        <el-table-column prop="size" label="模型大小" width="180">
          <template v-slot="scope">
            {{ formatSize(scope.row.size) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template v-slot="{ row }">
            <el-popconfirm title="确认删除?" @confirm="rmModel(row)">
              <template #reference>
                <el-button text icon="Delete" type="danger" />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>
<style lang="scss" scoped>
.model-head {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
</style>
